<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@import url(https://fonts.googleapis.com/css?family=Lato);
			body {
			  display: flex;
			  height: 100vh;
			  justify-content: center;
			  align-items: center;
			  font-family: Lato, sans-serif;
			  background: #ECEFFC;
			}
			
			.shadow {
			  filter: drop-shadow(-2px 2px 8px rgba(50, 50, 0, 0.5));
			}
			
			.card {
			  -webkit-clip-path: inset(0 0 70% 0);
			          clip-path: inset(0 0 70% 0);
			  transform: translateY(30%);
			  transition: 0.5s ease;
			}
			.card .card-header {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  width: 400px;
			  height: 100px;
			  font-size: 2em;
			  color: white;
			  background-color: #2979ff;
			  -webkit-clip-path: inset(0 19% 0 19%);
			          clip-path: inset(0 19% 0 19%);
			  transition: 0.5s ease;
			}
			.card .card-body {
			  box-sizing: border-box;
			  padding: 1.25em;
			  width: 400px;
			  height: 225px;
			  font-size: 1.5em;
			  background: white;
			  -webkit-clip-path: inset(0 19% 0 19%);
			          clip-path: inset(0 19% 0 19%);
			  transition: 0.5s ease;
			}
			.card .card-body dl {
			  display: flex;
			  flex-direction: column;
			  justify-content: space-between;
			  width: 100%;
			  height: 100%;
			  margin: 0;
			}
			.card .card-body span {
			  opacity: 0;
			  transform: translateY(100%);
			  transition: 0.5s ease-in;
			}
			.card .card-body span:nth-child(1) {
			  transition-delay: 0.1s;
			}
			.card .card-body span:nth-child(2) {
			  transition-delay: 0.2s;
			}
			.card .card-body span:nth-child(3) {
			  transition-delay: 0.3s;
			}
			.card .card-body span dt,
			.card .card-body span dd {
			  display: inline;
			  margin: 0;
			}
			.card .card-body span dt svg,
			.card .card-body span dd svg {
			  margin-right: 0.3em;
			}
			.card:hover {
			  transform: translateY(0);
			  -webkit-clip-path: inset(0 0 0 0);
			          clip-path: inset(0 0 0 0);
			}
			.card:hover .card-header,
			.card:hover .card-body {
			  -webkit-clip-path: inset(0 0 0 0);
			          clip-path: inset(0 0 0 0);
			}
			.card:hover span {
			  opacity: 1;
			  transform: translateY(0);
			}
		</style>
	</head>
	<body>
		<div class="shadow">
		  <div class="card">
		    <div class="card-header">Contact</div>
		    <div class="card-body">
		      <dl>
		        <span>
		                <dt><a href="https://github.com/alphardex" target="_blank"><svg t="1580195147272" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="737" width="27" height="27"><path d="M950.930286 512q0 143.433143-83.748571 257.974857t-216.283429 158.573714q-15.433143 2.852571-22.601143-4.022857t-7.168-17.115429l0-120.539429q0-55.442286-29.696-81.115429 32.548571-3.437714 58.587429-10.313143t53.686857-22.308571 46.299429-38.034286 30.281143-59.977143 11.702857-86.016q0-69.12-45.129143-117.686857 21.138286-52.004571-4.534857-116.589714-16.018286-5.12-46.299429 6.290286t-52.589714 25.161143l-21.723429 13.677714q-53.174857-14.848-109.714286-14.848t-109.714286 14.848q-9.142857-6.290286-24.283429-15.433143t-47.689143-22.016-49.152-7.68q-25.161143 64.585143-4.022857 116.589714-45.129143 48.566857-45.129143 117.686857 0 48.566857 11.702857 85.723429t29.988571 59.977143 46.006857 38.253714 53.686857 22.308571 58.587429 10.313143q-22.820571 20.553143-28.013714 58.88-11.995429 5.705143-25.746286 8.557714t-32.548571 2.852571-37.449143-12.288-31.744-35.693714q-10.825143-18.285714-27.721143-29.696t-28.306286-13.677714l-11.410286-1.682286q-11.995429 0-16.603429 2.56t-2.852571 6.582857 5.12 7.972571 7.460571 6.875429l4.022857 2.852571q12.580571 5.705143 24.868571 21.723429t17.993143 29.110857l5.705143 13.165714q7.460571 21.723429 25.161143 35.108571t38.253714 17.115429 39.716571 4.022857 31.744-1.974857l13.165714-2.267429q0 21.723429 0.292571 50.834286t0.292571 30.866286q0 10.313143-7.460571 17.115429t-22.820571 4.022857q-132.534857-44.032-216.283429-158.573714t-83.748571-257.974857q0-119.442286 58.88-220.306286t159.744-159.744 220.306286-58.88 220.306286 58.88 159.744 159.744 58.88 220.306286z" p-id="738" fill="#4289ff"></path></svg></a></dt>
		                <dd>alphardex</dd>
		            </span>
		        <span>
		                <dt><a href="mailto:2582347430@qq.com"><svg t="1580195271469" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9773" width="27" height="27"><path d="M1024.073143 405.723429l0 453.705143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-841.142857 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-453.705143q25.161143 28.013714 57.709714 49.737143 206.848 140.580571 284.013714 197.12 32.548571 23.990857 52.882286 37.449143t53.979429 27.428571 62.829714 13.970286l1.170286 0q29.110857 0 62.829714-13.970286t53.979429-27.428571 52.882286-37.449143q97.133714-70.290286 284.598857-197.12 32.548571-22.308571 57.124571-49.737143zM1024.073143 237.714286q0 45.129143-28.013714 86.308571t-69.705143 70.290286q-214.820571 149.138286-267.410286 185.709714-5.705143 4.022857-24.283429 17.408t-30.866286 21.723429-29.696 18.578286-32.841143 15.433143-28.598857 5.12l-1.170286 0q-13.165714 0-28.598857-5.12t-32.841143-15.433143-29.696-18.578286-30.866286-21.723429-24.283429-17.408q-52.004571-36.571429-149.723429-104.301714t-117.174857-81.408q-35.401143-23.990857-66.852571-65.974857t-31.451429-77.970286q0-44.544 23.698286-74.313143t67.730286-29.696l841.142857 0q37.156571 0 64.292571 26.843429t27.136 64.585143z" p-id="9774" fill="#4289ff"></path></svg></a></dt>
		                <dd>2582347430@qq.com</dd>
		            </span>
		        <span>
		                <dt><a href="tel:+8613063509980"><svg t="1580195327065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10241" width="27" height="27"><path d="M914.285714 708.534857q0 15.433143-5.705143 40.301714t-11.995429 39.131429q-11.995429 28.598857-69.705143 60.562286-53.686857 29.110857-106.276571 29.110857-15.433143 0-29.988571-1.974857t-32.841143-7.168-27.136-8.265143-31.744-11.702857-28.013714-10.313143q-56.027429-19.968-99.986286-47.396571-73.142857-45.129143-151.113143-123.172571t-123.172571-151.113143q-27.428571-44.032-47.396571-99.986286-1.682286-5.12-10.313143-28.013714t-11.702857-31.744-8.265143-27.136-7.168-32.841143-1.974857-29.988571q0-52.589714 29.110857-106.276571 32.036571-57.709714 60.562286-69.705143 14.262857-6.290286 39.131429-11.995429t40.301714-5.705143q7.972571 0 11.995429 1.682286 10.313143 3.437714 30.281143 43.446857 6.290286 10.825143 17.115429 30.866286t19.968 36.278857 17.700571 30.573714q1.682286 2.267429 10.020571 14.262857t12.288 20.260571 4.022857 16.310857q0 11.410286-16.310857 28.598857t-35.401143 31.451429-35.401143 30.281143-16.310857 26.258286q0 5.12 2.852571 12.873143t4.827429 11.702857 7.972571 13.677714 6.582857 10.825143q43.446857 78.262857 99.401143 134.290286t134.290286 99.401143q1.170286 0.585143 10.825143 6.582857t13.677714 7.972571 11.702857 4.827429 12.873143 2.852571q10.313143 0 26.258286-16.310857t30.281143-35.401143 31.451429-35.401143 28.598857-16.310857q7.972571 0 16.310857 4.022857t20.260571 12.288 14.262857 10.020571q14.262857 8.557714 30.573714 17.700571t36.278857 19.968 30.866286 17.115429q40.009143 19.968 43.446857 30.281143 1.682286 4.022857 1.682286 11.995429z" p-id="10242" fill="#4289ff"></path></svg></a></dt>
		                <dd>(+86)13063509980</dd>
		            </span>
		      </dl>
		    </div>
		  </div>
		</div>
	</body>
</html>
